<style lang="scss" scoped>
.el-table--enable-row-hover:hover{
  background: #fff!important
}
  .alarm-search {
    height: 40px;
  }
  .templ-btn {
    margin-top: 10px;
  }
  .filter-bar-query{
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  .main-content{
    padding: 0!important
  }
  .set-alarm-label {
    display: inline-block;
    width: 90px;
    font-size: 14px;

  }
  .set-alarm-content {
    display: inline-block;
    width: 70%;
  }
  .time-input {
    width: 45px;
  }
  .alarm-set-col {
    margin-bottom: 15px;
  }
  .set-alarm-textarea {
    position: relative;
    top: -70px;
  }
  .template-row {
    padding: 15px 0;
    // width:1100px;
    // height:405px;
    height:100%;
    width:70%;
    border:1px solid #ccc;
    margin: 0 auto;
  }
  .dashLine{
    border-top:1px dashed #ccc;
    padding-top:15px;
    position:relative;
  }
  .sendWord{
    font-size:16px;
    font-weight:bold;
    margin-left:15%;
    margin-top:30px;
    margin-bottom:15px;
    width:60%;
  }
  .addway{
    margin-left:20px;
    margin-bottom:15px;
  }
  .rule-close {
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    right: 12px;
    top: 15px;
  }
  .activationBtn{
    font-size:14px;

  }
  .alarm-name-input{
    width:215px;
  }
</style>
<template>
  <div class="filter-bar-query">
    <div class="alarm-search">
       <el-row>
       <el-col :span="4"  >
         <p class="icon-sendRole">编辑发送通道</p>
      </el-col>
    </el-row>

    </div>
    <div style="margin-top:10px;">
    <!-- 
    <el-table :data="alarmList">
      <el-table-column prop="alarmLevelName" label="告警名称" min-width="15%"></el-table-column>
      <el-table-column prop="alarmLevelNameZh" label="告警级别" min-width="15%"></el-table-column>
      <el-table-column prop="alarmLevelDesc" label="告警描述" min-width="40%"></el-table-column>
      <el-table-column prop="alarmchannel" label="发送通道"  min-width="10%">
        <template scope="scope">Onduty</template>
      </el-table-column> -->
      <!--<el-table-column prop="" label="告警频次" min-width="10%"></el-table-column>
      <el-table-column prop="" label="支持组"  min-width="10%"></el-table-column>-->
    <!-- </el-table> -->
    <!--<el-row class="sendWord">告警发送设置</el-row>-->
    <el-row class="template-row">
        <!--<el-button @click="addWay" type="primary"  class="el-icon-plus addway" size="small"> 关联发送通道</el-button>-->
        <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">发送通道名称</span>
          <el-select v-model="channelName" size="small" placeholder="请选择">
            <el-option
              v-for="item in channelDataName"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">通道</span>
          <el-select v-model="channel" size="small" placeholder="请选择"  @change="changeValue">
            <el-option
              v-for="item in channelData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col class="alarm-set-col" :span="9" :offset="2" style="padding:10px;width:850px;border:1px dashed #ccc;height:100%">
          <span class="set-alarm-label">服务级别</span>
          <el-select v-model="level" size="small" placeholder="请选择">
            <el-option
              v-for="item in levelData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span style="width:50px; display: inline-block; font-size: 14px;">支持组</span>
          <el-select v-model="supportGroup" size="small" width="20">
              <el-option
              v-for="item in supportGroupData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-col :span="7">
            <span >CTI</span>
            <div class="set-alarm-content">
              <el-input type="text" class="alarm-name-input" size="small" :disabled="true"></el-input>
            </div>
        </el-col>
        </el-col>
        <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">发送策略</span>
          <el-select v-model="strategy" size="small" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
          </el-select>
        </el-col>
        <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">发送频率</span>
          <div class="set-alarm-content">
            <span>每</span>
            <el-input type="text" @change="checkTimeNumber" v-model="timeSet" class="time-input" size="small"></el-input>
            <span>分钟，发送一次</span>
            <!--<el-input type="text" @change="checkCountNumber" v-model="count" :disabled="true" class="time-input" size="small"></el-input>
            <span>次</span>-->
          </div>
        </el-col>

         <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">自动升级策略</span>
          <div class="set-alarm-content">
            <span>持续告警</span>
            <el-input type="text" @change="checkTimeNumber" v-model="timeSet" class="time-input" size="small"></el-input>
            <span>分钟，提升一次</span>
            
          </div>
        </el-col>

         <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">告警信息模板</span>
          <el-select v-model="alarmInfor" size="small" placeholder="请选择">
          <el-option
              v-for="item in alarmInformation"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
          </el-select>
        </el-col>


        <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label">告警主题</span>
          <div class="set-alarm-content">
            <el-input size="small" placeholder="请输入告警主题" v-model="theme"></el-input>
          </div>
        </el-col>
        <el-col class="alarm-set-col" :span="21" :offset="2">
          <span class="set-alarm-label set-alarm-textarea">告警内容</span>
          <div class="set-alarm-content">
            <el-input type="textarea" placeholder="请输入告警内容" :rows="4" size="small" v-model="content"></el-input>
          </div>
        </el-col> 
 </el-col>
 
      </el-row>
      <div>
        <el-button size="small" @click="quxiao()">取 消</el-button>
        <el-button type="primary" size="small" @click="quxiao()">确 定</el-button>
    </div>
   
     </div>
  </div>
  
</template>

<script>
  import { Table, TableColumn, Row, Col, Button, Input, Select, Option, Message, Switch, FormItem, Form} from 'element-ui'
  export default { 
     created(){
        this.$emit('changeStep', 3)
        this._alarmLevels()
     },
     methods: { 
      changeValue(value){
          console.log(value);
         
          // if(value == 'Emali-1'){
         

          // }
          
      },
      clickChannelName(){
        console.log('1')

      },
      activation: function (){
          console.log(this.btnValue)
      },
      deleteWay (index) {
        // this.allData.pop()
        this.allData.splice(index,1)
        // console.log(this.allData.length)
        return Message('已成功删除当前通道')
      },
      addWay () {
        console.log(this.allData)
      if (this.allData.length > 9) {
          return Message('只允许创建十条通道')  
        }
      this.allData.push({
          
      })
       },
     quxiao(){
       this.$router.push('/alarm/sendlist')
     },
    
      checkTimeNumber (v) {
        this.$nextTick(() => {
          this.timeSet = v.replace(/[^\d]/g, '')
        })
      },
      checkCountNumber (v) {
        this.$nextTick(() => {
          this.count = v.replace(/[^\d]/g, '')
        })
      },
      async _alarmLevels () {
        var data  = await this.api.alarmLevels()
        data.data.some((v, i) => {
          this.levelData.push({
            value: v.alarmLevelCode,
            label: v.alarmLevelNameZh
          })
        })
      },
    },
    data () {
      return {
        channelDataName:[{
            value: 'alarm-test'
        }],
        supportGroupData:[{
            value: '1',
            lebal: '1'
        },
        {             
          value: '2',
          lebal: '2'
        }],

        alarmInformation:[{
          value: '告警信息模板-1',
          lebal: '1'
        },
        {
          value:'告警信息模板-2',
          lebal:'2'
        }],
      
        options:[{
          value: '策略模板-1',
          lebal: '1'
        },
        {
          value:'策略模板-2',
          lebal:'2'
        }],
        btnValue:false,
        allData:[
            {
            
            }
        ],
        alarmList: [],
        channelData: [
          {
            value: 'Onduty'
          },
          {
            value: 'Emali-1'
          },
          {
            value: 'Emali-2'
          },
          {
            value: 'SMS-1'
          }
        ],
        channel: 'Onduty',
        channelName: 'alarm-test',
        // channelName: 'alarm-test',
        timeSet: 5,
        theme: '',
        content: '',
        count: 1,
        createDisabled: false,
        level: '',
        strategy: '',
        alarmInfor: '',
        supportGroup: '',
        levelData: []
      }
    },
   
    components: {
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-row': Row,
      'el-col': Col,
      'el-button': Button,
      'el-input': Input,
      'el-select': Select,
      'el-option': Option,
      'el-switch':Switch,
      'el-form-item':FormItem,
      'el-form':Form
    }
  }
</script>
